@import '../../styles/global';

/** 弹出层图标 **/

.doc-icon-background {
  background-color: var(--color-bg-1);
  margin-right: 6px;
}

.doc-icon-container {
  @include standalone-region;

  align-items: center;
  box-sizing: border-box;
  color: rgb(var(--arcoblue-6));
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  width: 32px;

  &:hover {
    background-color: var(--color-fill-1);
  }
}

.doc-line-hover {
  background-color: rgb(var(--arcoblue-6), 0.2);
  border-radius: 3px;
}

/** 弹出层菜单  **/

.arco-trigger.doc-toolbar-trigger {
  z-index: $doc-menu-z-index;
}

.doc-trigger-menu {
  @include standalone-region;

  background-color: var(--color-bg-1);
  box-sizing: border-box;
  color: var(--color-text-1);
  padding: 7px;
  width: 240px;

  /** Signal Menu **/

  .doc-trigger-signal-menu {
    border-bottom: 1px solid var(--color-border-2);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 5px;
    padding-top: 2px;

    .toolbar-signal-menu {
      cursor: pointer;
      flex-shrink: 0;
      font-size: 16px;
      margin: 4px 8px;
      padding: 0 6px;
    }

    .toolbar-signal-menu:hover {
      background-color: var(--color-fill-2);
    }
  }

  /** Banner Menu **/

  .doc-trigger-banner-menu {
    padding-top: 2px;

    .toolbar-banner-menu {
      align-items: center;
      cursor: pointer;
      display: flex;
      margin: 5px 0;
      padding: 5px 10px;

      &:hover {
        background-color: var(--color-fill-2);
      }

      .banner-menu-icon {
        font-size: 16px;
        margin-right: 6px;
      }
    }
  }
}
